<!-- 空白页面参考模版 -->
{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<section class="content">
    <div class="row">

        <div class="col-md-5">
            <div class="card">
                <div class="card-body">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            你的名字：<span id="username" class="text-primary"></span>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">房间列表</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <ul class="nav nav-pills flex-column">
                        {foreach name='room_list' id='room'}
                        <li class="nav-item">
                            <a href="#" onclick="joinRoom('{$room.code}')" class="nav-link">
                                <i class="far fa-circle text-primary"></i><span
                                    id="room{$room.code}">{$room.name}</span>
                                <span class="badge float-right bg-primary" id="room_count{$room.code}">0</span>
                            </a>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="card card-primary card-outline direct-chat direct-chat-primary">
                <div class="card-header">
                    <h3 class="card-title" id="currentRoom">请先选择房间</h3>
                </div>

                <div class="card-body">

                    <div class="direct-chat-messages" id="content">
                    </div>
                </div>
                <div class="card-footer">
                    <div class="input-group">
                        <input type="text" id="msg" name="msg" placeholder="输入消息" class="form-control">
                        <span class="input-group-append">
                            <button type="button" onclick="send()" class="btn btn-primary">发送</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div id="otherMsg" style="display: none;">
    <div class="direct-chat-msg">
        <div class="direct-chat-infos clearfix">
            <span class="direct-chat-name float-left">USERNAME</span>
            <span class="direct-chat-timestamp float-right">MSG_TIME</span>
        </div>
        <img class="direct-chat-img" src="__ADMIN_IMAGES__/avatar.png" alt="用户头像">
        <div class="direct-chat-text">
            MSG_CONTENT
        </div>
    </div>
</div>

<div id="myMsg" style="display: none;">
    <div class="direct-chat-msg right">
        <div class="direct-chat-infos clearfix">
            <span class="direct-chat-name float-right">USERNAME</span>
            <span class="direct-chat-timestamp float-left">MSG_TIME</span>
        </div>
        <img class="direct-chat-img" src="__ADMIN_IMAGES__/avatar.png" alt="用户头像">
        <div class="direct-chat-text">
            MSG_CONTENT
        </div>
    </div>
</div>


<script>

    var ws;
    var username = '';
    var room = '';

    var wsPingHandle = null;


    var wsServer = 'ws://127.0.0.1:2001/';

    $(function () {
        setUsername();
        wsConnect();
        $('#msg').bind('keypress',function(event){
            if(event.keyCode === 13) {
                send();
            }
        });

    });

    $(document).on('pjax:start', function(event){
        if(isWs(ws) && ws.readyState===WebSocket.OPEN){
            closePing();
            ws.close();
        }
    });


    function send() {
        if (room.length === 0) {
            showAdminError('请选择房间')
            return;
        }

        let $msg = $('#msg');
        let msg = $msg.val();
        if (msg.length < 1) {
            showAdminError('请输入消息');
            return;
        }

        if (msg.length > 200) {
            console.log('发送长度超出范围');
            return;
        }

        $msg.val('');

        if (isWs(ws) && ws.readyState === 1) {
            //利用websocket发送
            let content = '{"type":"msg","data":"' + msg + '","room":"' + room + '"}';
            sendMsg(content);
        } else {
            showAdminError('当前未连接，消息发送失败');
        }

        return false;
    }

    function wsConnect() {
        if (username.length < 1) {
            showAdminError('姓名非法');
            return;
        }
        let wsServerUrl = wsServer + '?username=' + username;

        ws = new WebSocket(wsServerUrl);
        ws.onopen = function () {
            wsOpen();
        };

        ws.onerror = function (e) {
            wsError(e);
        }

        ws.onclose = function (e) {
            wsClose(e);
        }

        ws.onmessage = function (e) {
            wsMessage(e);
        };
    }

    function wsError(e) {
        showAdminError('连接出错，异常断开');
        console.log(e);
    }

    function wsClose(e) {
        showAdminError('连接已被关闭');
        console.log(e);
    }

    function wsOpen() {
        showAdminSuccess('websocket已连接');
        wsAuth();
        wsPingHandle = wsPing();
    }

    function wsAuth() {
        let content = '{"type":"auth","username":"' + username + '"}';
        sendMsg(content);
    }

    function wsMessage(e) {
        console.log("收到服务端的消息：" + e.data);
        let data = e.data
        if (isJson(data)) {
            let jsonData = JSON.parse(data);

            try {

                let content = '';
                if (jsonData.type === 'msg') {
                    if (jsonData.username !== username) {
                        content = $('#otherMsg').html();
                    } else {
                        content = $('#myMsg').html();
                    }

                    content = content.replace(/USERNAME/g, jsonData.username).replace(/MSG_TIME/g, jsonData.msg_time).replace(/MSG_CONTENT/g, jsonData.data);

                } else if (jsonData.type === 'join') {
                    content = ('[' + jsonData.username + '] 进入了房间');
                } else if (jsonData.type === 'leave') {
                    content = ('[' + jsonData.username + '] 离开了房间');
                } else if (jsonData.type === 'data') {
                    $.each(jsonData.data, function (index, item) {
                        $('#room_count' + item.code).html(item.number);
                    });
                }
                appendContent(content);

            } catch ($e) {
                console.log(e);
            }


        } else {
            console.log('返回了非json字符串');
        }
    }

    function appendContent(content) {
        let $content = $("#content");
        $content.append(content);
        let ele = document.getElementById('content');
        ele.scrollTop = ele.scrollHeight;
    }

    /**
     * ping功能 之前内容为：{"type":"ping"}，改成1，节省流量
     * @param content
     * @param interval
     */
    function wsPing(content = '1', interval = 10000) {

        // 限制最长心跳检测间隔为60秒
        if (interval > 60000) {
            interval = 60000;
        }
        // 限制最短心跳检测间隔为2秒
        if (interval < 2000) {
            interval = 2000;
        }

        // 先判断是否在连接状态
        if (ws.readyState !== WebSocket.OPEN) {
            appendContent('当前不在连接状态，无法发送ping信息');
            return false;
        }

        return setInterval(function () {
            if (getWsStatus(ws) === WebSocket.OPEN) {
                console.log('发送ping内容：' + content);
                sendMsg('1');
            } else {
                console.log('未连接，不会发送ping');
            }
        }, interval);
    }

    function closePing() {
        clearInterval(wsPingHandle);
    }


    function joinRoom(code) {
        showAdminLoading('正在加入，请稍候……')

        $('#content').html('');
        if (!isWs(ws) || getWsStatus(ws) !== WebSocket.OPEN) {
            wsConnect();
            setTimeout(function () {
                let content = '{"type":"join","room":"' + code + '"}'
                sendMsg(content);
                closeAdminLoading();
            }, 200);
        } else {
            let content = '{"type":"join","room":"' + code + '"}'
            sendMsg(content);
            closeAdminLoading();
        }

        room = code;

        let roomName = $('#room' + code).html();
        $('#currentRoom').html('当前房间：' + roomName);

    }

    function sendMsg(content) {
        ws.send(content)
    }


    // 获取ws的状态
    function getWsStatus(ws) {
        return isWs(ws) ? ws.readyState : 3;
    }

    // 是否为websocket
    function isWs(ws) {
        return typeof ws === 'object' && ws.readyState !== undefined;
    }

    /**
     * 判断是否为json格式字符串
     * @param str
     * @returns {boolean}
     */
    function isJson(str) {
        if (typeof str == 'string') {
            try {
                var obj = JSON.parse(str);
                return !!(typeof obj == 'object' && obj);
            } catch (e) {
                return false;
            }
        }
        return false;
    }


    function setUsername() {
        username = randomUsername();
        $('#username').html(username);
    }

    function randomUsername() {
        let firstNames = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '楮', '卫', '蒋', '沈', '韩', '杨',
            '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜',
            '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎',
            '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐',
            '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常',
            '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄',
            '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧',
            '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁',
            '杜', '阮', '蓝', '闽', '席', '季', '麻', '强', '贾', '路', '娄', '危', '江', '童', '颜', '郭',
            '梅', '盛', '林', '刁', '锺', '徐', '丘', '骆', '高', '夏', '蔡', '田', '樊', '胡', '凌', '霍',
            '虞', '万', '支', '柯', '昝', '管', '卢', '莫', '经', '房', '裘', '缪', '干', '解', '应', '宗',
            '丁', '宣', '贲', '邓', '郁', '单', '杭', '洪', '包', '诸', '左', '石', '崔', '吉', '钮', '龚',
            '程', '嵇', '邢', '滑', '裴', '陆', '荣', '翁', '荀', '羊', '於', '惠', '甄', '麹', '家', '封',
            '芮', '羿', '储', '靳', '汲', '邴', '糜', '松', '井', '段', '富', '巫', '乌', '焦', '巴', '弓',
            '牧', '隗', '山', '谷', '车', '侯', '宓', '蓬', '全', '郗', '班', '仰', '秋', '仲', '伊', '宫',
            '宁', '仇', '栾', '暴', '甘', '斜', '厉', '戎', '祖', '武', '符', '刘', '景', '詹', '束', '龙',
            '叶', '幸', '司', '韶', '郜', '黎', '蓟', '薄', '印', '宿', '白', '怀', '蒲', '邰', '从', '鄂',
            '索', '咸', '籍', '赖', '卓', '蔺', '屠', '蒙', '池', '乔', '阴', '郁', '胥', '能', '苍', '双',
            '闻', '莘', '党', '翟', '谭', '贡', '劳', '逄', '姬', '申', '扶', '堵', '冉', '宰', '郦', '雍',
            '郤', '璩', '桑', '桂', '濮', '牛', '寿', '通', '边', '扈', '燕', '冀', '郏', '浦', '尚', '农',
            '温', '别', '庄', '晏', '柴', '瞿', '阎', '充', '慕', '连', '茹', '习', '宦', '艾', '鱼', '容',
            '向', '古', '易', '慎', '戈', '廖', '庾', '终', '暨', '居', '衡', '步', '都', '耿', '满', '弘',
            '匡', '国', '文', '寇', '广', '禄', '阙', '东', '欧', '殳', '沃', '利', '蔚', '越', '夔', '隆',
            '师', '巩', '厍', '聂', '晁', '勾', '敖', '融', '冷', '訾', '辛', '阚', '那', '简', '饶', '空',
            '曾', '毋', '沙', '乜', '养', '鞠', '须', '丰', '巢', '关', '蒯', '相', '查', '后', '荆', '红',
            '游', '竺', '权', '逑', '盖', '益', '桓', '公', '仉', '督', '晋', '楚', '阎', '法', '汝', '鄢',
            '涂', '钦', '岳', '帅', '缑', '亢', '况', '后', '有', '琴', '归', '海', '墨', '哈', '谯', '笪',
            '年', '爱', '阳', '佟', '商', '牟', '佘', '佴', '伯', '赏', "万俟", "司马", "上官", "欧阳", "夏侯",
            "诸葛", "闻人", "东方", "赫连", "皇甫", "尉迟", "公羊", "澹台", "公冶", "宗政", "濮阳", "淳于",
            "单于", "太叔", "申屠", "公孙", "仲孙", "轩辕", "令狐", "锺离", "宇文", "长孙", "慕容", "鲜于",
            "闾丘", "司徒", "司空", "丌官", "司寇", "子车", "微生", "颛孙", "端木", "巫马", "公西", "漆雕",
            "乐正", "壤驷", "公良", "拓拔", "夹谷", "宰父", "谷梁", "段干", "百里", "东郭", "南门", "呼延",
            "羊舌", "梁丘", "左丘", "东门", "西门", "南宫"];

        let lastNames = ['子璇', '淼', '国栋', '夫子', '瑞堂', '甜', '敏', '尚', '国贤', '贺祥', '晨涛',
            '昊轩', '易轩', '益辰', '益帆', '益冉', '瑾春', '瑾昆', '春齐', '杨', '文昊',
            '东东', '雄霖', '浩晨', '熙涵', '溶溶', '冰枫', '欣欣', '宜豪', '欣慧', '建政',
            '美欣', '淑慧', '文轩', '文杰', '欣源', '忠林', '榕润', '欣汝', '慧嘉', '新建',
            '建林', '亦菲', '林', '冰洁', '佳欣', '涵涵', '禹辰', '淳美', '泽惠', '伟洋',
            '涵越', '润丽', '翔', '淑华', '晶莹', '凌晶', '苒溪', '雨涵', '嘉怡', '佳毅',
            '子辰', '佳琪', '紫轩', '瑞辰', '昕蕊', '萌', '明远', '欣宜', '泽远', '欣怡',
            '佳怡', '佳惠', '晨茜', '晨璐', '运昊', '汝鑫', '淑君', '晶滢', '润莎', '榕汕',
            '佳钰', '佳玉', '晓庆', '一鸣', '语晨', '添池', '添昊', '雨泽', '雅晗', '雅涵',
            '清妍', '诗悦', '嘉乐', '晨涵', '天赫', '玥傲', '佳昊', '天昊', '萌萌', '若萌',
            "秋白", "南风", "醉山", "初彤", "凝海", "紫文", "凌晴", "香卉", "雅琴", "傲安",
            "傲之", "初蝶", "寻桃", "代芹", "诗霜", "春柏", "绿夏", "碧灵", "诗柳", "夏柳",
            "采白", "慕梅", "乐安", "冬菱", "紫安", "宛凝", "雨雪", "易真", "安荷", "静竹",
            "飞雪", "雪兰", "雅霜", "从蓉", "冷雪", "靖巧", "翠丝", "觅翠", "凡白", "乐蓉",
            "迎波", "丹烟", "梦旋", "书双", "念桃", "夜天", "海桃", "青香", "恨风", "安筠",
            "觅柔", "初南", "秋蝶", "千易", "安露", "诗蕊", "山雁", "友菱", "香露", "晓兰",
            "涵瑶", "秋柔", "思菱", "醉柳", "以寒", "迎夏", "向雪", "香莲", "以丹", "依凝",
            "如柏", "雁菱", "凝竹", "宛白", "初柔", "南蕾", "书萱", "梦槐", "香芹", "南琴",
            "绿海", "沛儿", "晓瑶", "听春", "易巧", "念云", "晓灵", "静枫", "夏蓉", "如南",
            "幼丝", "秋白", "冰安", "凝蝶", "紫雪", "念双", "念真", "曼寒", "凡霜", "白卉",
            "语山", "冷珍", "秋翠", "夏柳", "如之", "忆南", "书易", "翠桃", "寄瑶", "如曼",
            "问柳", "香梅", "幻桃", "又菡", "春绿", "醉蝶", "亦绿", "诗珊", "听芹", "新之",
            "博瀚", "博超", "才哲", "才俊", "成和", "成弘", "昊苍", "昊昊", "昊空", "昊乾",
            "昊然", "昊然", "昊天", "昊焱", "昊英", "浩波", "浩博", "浩初", "浩大", "浩宕",
            "浩荡", "浩歌", "浩广", "浩涆", "浩瀚", "浩浩", "浩慨", "浩旷", "浩阔", "浩漫",
            "浩淼", "浩渺", "浩邈", "浩气", "浩然", "浩穰", "浩壤", "浩思", "浩言", "皓轩",
            "和蔼", "和安", "和昶", "翔东", "昊伟", "楚桥", "智霖", "浩杰", "炎承", "思哲",
            "璟新", "楚怀", "继智", "昭旺", "俊泽", "子中", "羽睿", "嘉雷", "鸿翔", "明轩",
            "棋齐", "轶乐", "昭易", "臻翔", "泽鑫", "芮军", "浩奕", "宏明", "忠贤", "锦辉",
            "元毅", "霈胜", "宇峻", "子博", "语霖", "胜佑", "俊涛", "浩淇", "乐航", "泽楷",
            "嘉宁", "敬宣", "韦宁", "建新", "宇怀", "皓玄", "冠捷", "俊铭", "一鸣", "堂耀",
            "轩凝", "舰曦", "跃鑫", "梓杰", "筱宇", "弘涛", "羿天", "广嘉", "陆铭", "志卿",
            "连彬", "景智", "孟昕", "羿然", "文渊", "羿楦", "晗昱", "晗日", "涵畅", "涵涤",
            "昊穹", "涵亮", "涵忍", "涵容", "俊可", "智鹏", "诚钰", "书墨", "俊易", "浩渺",
            "宸水", "嘉许", "时贤", "飞腾", "沂晨", "殿斌", "霄鸿", "辰略", "澜鸿", "景博",
            "咨涵", "修德", "景辉", "语旋", "智逸", "鸿锋", "思梵", "弈煊", "泰河", "逞宇",
            "嘉颢", "锦沅", "颢焱", "萧彬", "悦升", "香音", "烨柠", "颢咏", "仁贤", "尚然",
            "羿鳞", "月鸿", "健霖", "鸿昊", "竣杰", "可顺", "炯乐", "俊彦", "海沧", "捷明",
            "飞扬", "杰辰", "羽捷", "曦晴", "裕鸿", "翌锦", "沐宸", "福同", "旻驰", "龙宁",
            "文虹", "义凡", "广晨", "宸滔", "嘉岐", "雅珺", "睿明", "皓轩", "程天", "子酝",
            "艾康", "如羽", "冠玉", "子歉", "永昊", "龙华", "兆颜", "奇文", "月昕", "裕锦",
            "昂佳", "昊浩", "宇韬", "睿焓", "永译", "鸿彬", "颢霖", "益彬", "虹昊", "飞悦",
            "睿珏", "?宵童", "睿鸿", "容冰", "逸濠", "楷岩", "弘义", "海萦", "昊孺", "梓铭",
            "生钊", "蓝玺", "晨辕", "宇菡", "砚海", "文揩", "韬瑞", "彦红", "奕韦", "清予",
            "宁翼", "冬睿", "锦昌", "烨宁", "昌权", "国研", "德运", "孝清", "佳阳", "凯玮",
            "正真", "民云", "昕冶", "力威", "帅欣", "知淳", "烨飞", "兴远", "子墨", "澄欣",
            "烨煊", "悦勤", "晨津", "博宏", "育萌", "羽炫", "绍钧", "睿昌", "泓千", "颢炜",
            "虹金", "筠航", "元甲", "星明", "景涛", "铭虹", "德本", "向辉", "基翔", "家易",
            "欣鹏", "羽荃", "泽容", "弘亮", "尚廷", "轩梓", "甫津", "彬楷", "寅飞", "愉君",
            "阳平", "誉杰", "钦昭", "蕴藉", "羽程", "宏海", "涵畅", "光浩", "令沂", "浩浩",
            "睿锦", "易泽", "俊康", "家文", "晨元", "语洋", "裕宏", "梓榛", "阳嘉", "恒展",
            "雨远", "哲伊", "逸江", "丰源", "学东", "奇岩", "浩财", "和蔼", "红言", "瑞赫",
            "森圆", "欣赢", "梓鸿", "博明", "铭育", "颢硕", "宇烯", "宇如", "淳炎", "源承",
            "斌彬", "飞沉", "鸿璐", "昊弘"];

        let firstLength = firstNames.length;
        let lastLength = lastNames.length;

        let i = parseInt(Math.random() * firstLength);
        let j = parseInt(Math.random() * lastLength);
        return firstNames[i] + lastNames[j];
    }
</script>


{/block}